<template>
  <div class="setting">
    <!-- 卡片容器 -->
    <el-card class="mycard">
      <!-- 页签栏 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="first">
          <el-button type="primary" @click="add" size="small" class="mpane">
            <!--图标按钮文本 -->
            <i class="el-icon-plus"></i>
            新增角色</el-button
          >
          <!-- 表格区域 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <!-- 操作按钮区域 -->
            <el-table-column fixed="right" label="操作" width="300">
              <template slot-scope="scope">
                <el-button type="info" size="small" @click="openAll(scope.row.id,scope.row.name)">分配权限</el-button>
                <el-button @click="add(scope.row)" size="small" type="warning"
                  >修改</el-button
                >
                <el-button type="danger" size="small" @click="remove(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="sizes"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination> -->

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-size="pagesize"
            :page-sizes="sizes"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </el-tab-pane>

        <!-- 公司管理区域 -->
        <el-tab-pane label="公司信息" name="second">
          <el-form :model="form" label-width="100px" class="myform">
            <el-form-item label="企业名称">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="form.companyAddress" disabled></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="form.companyPhone" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.mailbox" disabled></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remarks" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加和修改角色的面板 -->
    <el-dialog
      :title="newForm.id ? '修改面板' : '新增面板'"
      :visible="dialogShow"
      @close="cancel"
    >
      <el-form :model="form">
        <el-form-item label="角色名称">
          <el-input v-model="newForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="newForm.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>


      <!-- 分配权限面板 -->
      <setper :setperShow.sync='setperShow' :name='name' ref="mysetper"></setper>
  </div>
</template>
<script>
// 导入获取角色信息接口
import {
  RoleListApi,
  removeRoleApi,
  updateRoleApi,
  addRole,
  companyApi,
} from "@/api/character";
// 导入辅助函数
import { mapGetters } from "vuex";

export default {

  // 注册组件
  components:{
    setper:()=>import('./components/setper.vue')
  },

  // 计算属性
  computed: {
    // 将getters中的方法映射到这来
    ...mapGetters(["userInfo"]),
  },

  methods: {

    // 定义一个方法打开权限面板
    openAll(id,name){
      // 获取到点击这一项的name名字赋值给name
      this.name=name
      // 打开权限面板
      this.setperShow=true
      // 打开面板显示数据
      this.$refs.mysetper.getRolePer(id)
    },




    // 定义一个方法用来获取公司信息
    async company() {
      // 发送请求里面的参数id从用户接口中获取
      const res = await companyApi(this.userInfo.companyId);
      // console.log(res);
      // 保存数据到对象中
      this.form = res.data.data;
    },

    handleClick() {},
    // 定义一个获取角色信息的方法
    async RoleList() {
      const res = await RoleListApi({
        // 参数页码
        page: this.current,
        // 参数每一页多少条数据
        pagesize: this.pagesize,
      });
      // 把总页数保存起来
      this.total = res.data.data.total;
      // 保存到定义的对象中
      this.tableData = res.data.data.rows;
    },
    // 每一页的条数
    handleSizeChange(size) {
      this.pagesize = size;
      this.RoleList();
    },
    // 当前页
    handleCurrentChange(page) {
      this.current = page;
      this.RoleList();
    },

    // 删除角色的方法
    remove(row) {
      this.$confirm("你确定要删除嘛？")
        .then(async () => {
          // 调用接口发送请求传入id
          await removeRoleApi(row.id);
          //  调用刷新页面的方法
          this.RoleList();
          // 提示用户
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },

    // 点击修改
    add(row) {
      // 改变面板的显示
      (this.dialogShow = true),
        // 把修改的数据保存到新的对象中
        (this.newForm = { ...row });
    },

    // 点击面板中的取消关闭面板
    cancel() {
      // 关闭面板
      this.dialogShow = false;
    },

    // 点击确定修改角色信息
    async submit() {
      if (this.newForm.id) {
        // 发送请求
        await updateRoleApi(this.newForm);
        // 刷新页面数据
        this.RoleList();
        // 提示用户修改成功
        this.$message.success("修改成功");
        // 关闭面板
        this.dialogShow = false;
      } else {
        // 发送请求添加角色
        await addRole(this.newForm);
        // 提示用户添加成功
        this.$message.success("添加成功");
        // 关闭门面
        this.dialogShow = false;
        // 更新数据
        this.RoleList();
      }
    },
  },

  // 使用钩子一面一打开就渲染
  created() {
    // 调用获取角色信息接口
    this.RoleList();
    // 调用公司渲染数据方法
    this.company();
  },

  data() {
    return {
      //控制权限面板的显示与隐藏
      setperShow:false,
      //name是权限面板的名字
      name:'xx',


      // 控制面板显示和隐藏
      dialogShow: false,
      // 标签页类名
      activeName: "first",
      // 表格内容数组
      tableData: [],
      // 每页显示条目个数
      pagesize: 4,
      // 选择器总条数
      sizes: [4, 6, 8, 10],
      // 当前页
      current: 1,
      //总条数
      total: 0,
      // 公司信息数组
      form: {},
      // 定义一个新的对象用来接收新的数据
      newForm: {},
    };
  },
};
</script>

<style lang="scss">
.setting {
  .mycard {
    margin: 20px;
    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }
    .myform {
      width: 500px;
      margin-left: 300px;
    }
    .mpane {
      margin: 30px 0 20px 0;
    }
    .el-tabs__item {
      font-size: 22px;
      padding: 0 30px;
    }
  }
}
</style>
